<template>
  <div class="event-card">
    <div class="cover">
      <el-image class="cover" :src="props.eventInfo.cover"></el-image>
      <div class="category-position" v-show="props.eventInfo.categoryName"><el-tag :type="getTagColor()" effect="dark" >{{props.eventInfo.categoryName}}</el-tag></div>
    </div>
    <div class="event-content">
      <div>
        <h5 style="font-weight: 550">
          <el-text truncated  class="link-text title"> {{ props.eventInfo.title }}</el-text>
        </h5>
        <el-text line-clamp="2">{{ props.eventInfo.description }}</el-text>
      </div>
      <div style="margin-top: 10px">
        <el-space>
          <el-icon>
            <Timer/>
          </el-icon>
          <el-text size="small">{{ $timeFormat(props.eventInfo.startTime) }}</el-text>
        </el-space>
        <div>
          <el-space>
            <el-icon>
              <Location/>
            </el-icon>
            <el-text size="small">{{props.eventInfo.location}}</el-text>
          </el-space>
        </div>
        <div class="flex-between">
          <el-space>
            <el-icon><User /></el-icon>
            <el-text size="small">{{props.eventInfo.joinerCount || 0}}人已报名</el-text>
          </el-space>
          <el-space>
            <el-link type="danger" v-if="props.canEdit" @click="edit">编辑</el-link>
            <el-link @click="info"> 详情</el-link>
          </el-space>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, defineProps, computed} from "vue";

let tagColor =['primary','success','warning','danger']
let emit = defineEmits(['edit','info'])
let props = defineProps({
  eventInfo: {
    type: Object,
    default: () => {
    }
  },
  canEdit: {
    type: Boolean,
    default: false
  }
})
let getTagColor = () => {
  let index = Number(props.eventInfo.eventId) % tagColor.length;
  return tagColor[index]
}
let edit=() => {
  emit('edit', props.eventInfo.eventId)
}
let info=() => {
  emit('info', props.eventInfo.eventId)
}
</script>

<style scoped>
.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.title{
  font-size: 20px;
}
.event-card {
  width: 300px;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: solid 1px var(--el-border-color);
  text-align: left;
}
.category-position{
  position: absolute;
  top: 10px;
  left: 10px;
}
.cover {
  width: 100%;
  height: 190px;
  position: relative;
  text-align: center;
}

.event-content {
  padding: 20px;
}
</style>
